<template>
    <header>
        <div class="wrapper">
            <nav>
                <a class="item" @click="handClick('/')">Home</a>
                <a class="item" @click="handClick('/about')">About</a>
                <a class="item" @click="handClick('/index')">Index</a>
                <a class="item" @click="handClick('/print')">Print</a>
                <a class="item" @click="handClick('/unocss')">Unocss</a>
            </nav>
        </div>
    </header>

    <RouterView />
</template>

<script setup>
import { useRouter, RouterView } from "vue-router";

const router = useRouter();

const handClick = function(path) {
    router.push(path);
};
</script>

<style lang="less" scoped>
.wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    .item {
        display: block;
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
        &:hover {
            color: rgb(239, 31, 31);
            background-color: #fee9e9;
        }
    }
}
</style>
